<template>
  <div class="app-container">
    <el-col :span="22">
      <h3 class="title-left">质押申请</h3>
    </el-col>
    <el-col :span="24">
      <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData">
        <template slot="blank_1539760452000_75378" slot-scope="scope">
          <!-- 金额 -->
          <!-- 通过 v-model="scope.model.blank_1539760452000_75378" 绑定数据 -->
          <el-col :span="11">
            <el-input v-model="scope.model.blank_1539760452000_75378" type="number" />
          </el-col>
          <el-col :span="2" class="line">至</el-col>
          <el-col :span="11">
            <el-input type="number"/>
          </el-col>
        </template>

        <template slot="blank_1539761854000_29952" slot-scope="scope">
          <!-- 出票日期 -->
          <!-- 通过 v-model="scope.model.blank_1539761854000_29952" 绑定数据 -->
          <div class="block">
            <!--<span class="demonstration">默认</span>-->
            <el-date-picker
              v-model="scope.model.blank_1539761854000_29952"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
          </div>
        </template>

        <template slot="blank_1539761856000_4598" slot-scope="scope">
          <!-- 到期日期 -->
          <!-- 通过 v-model="scope.model.blank_1539761856000_4598" 绑定数据 -->
          <div class="block">
            <!--<span class="demonstration">默认</span>-->
            <el-date-picker
              v-model="scope.model.blank_1539761856000_4598"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
          </div>
        </template>

      </generate-form>
      <div class="generate-block">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </el-col>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
export default {
  name: 'PledgeApply',
  components: {
    GenerateForm
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'blank', 'name': '金额', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1539760452000_75378' }, 'key': '1539760452000_75378', 'model': 'blank_1539760452000_75378', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '持票单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539760714000_56939' }, 'key': '1539760714000_56939', 'model': 'input_1539760714000_56939', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539760448000_24617' }, 'key': '1539760448000_24617', 'model': 'grid_1539760448000_24617', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '票据号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539760733000_25403' }, 'key': '1539760733000_25403', 'model': 'input_1539760733000_25403', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '付款行', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'PayingBank' }, 'key': '1539760752000_5270', 'model': 'select_1539760752000_5270', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539760726000_16846' }, 'key': '1539760726000_16846', 'model': 'grid_1539760726000_16846', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '开户行', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'OpeningBank' }, 'key': '1539761748000_96388', 'model': 'select_1539761748000_96388', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '票据锁定', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'lock' }, 'key': '1539761792000_6997', 'model': 'select_1539761792000_6997', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539761741000_15122' }, 'key': '1539761741000_15122', 'model': 'grid_1539761741000_15122', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'blank', 'name': '出票日期', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1539761854000_29952' }, 'key': '1539761854000_29952', 'model': 'blank_1539761854000_29952', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'blank', 'name': '到期日期', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1539761856000_4598' }, 'key': '1539761856000_4598', 'model': 'blank_1539761856000_4598', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539761833000_43315' }, 'key': '1539761833000_43315', 'model': 'grid_1539761833000_43315', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }},
      editData: {},
      values: {},
      remoteFuncs: {

        PayingBank(resolve) {
          // 付款行 select_1539760752000_5270
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('付款行').then(response => { resolve(response.data) })
        },

        OpeningBank(resolve) {
          // 开户行 select_1539761748000_96388
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('开户行').then(response => { resolve(response.data) })
        },

        lock(resolve) {
          // 票据是否锁定 select_1539761792000_6997
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('票据锁定').then(response => { resolve(response.data) })
        }

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
<style>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
</style>
